<template>
    <div class="personal-center-layout main-layout">
          <div class="top-pics">
            <img class="logo" src="../../base/images/LOGO_home@2x.png" alt="">
            <img class="title" src="../../base/images/title@2x.png" alt="">
          </div>
           <div class="personal-center-layout-avandor">
                 <div class="avandor-bg">
                     <img v-bind:src="avandorSrc" />
                 </div>
               <div class="avandor-name md-font flex flex-horizontal-center flex-vertical-center">
                   {{avandorName}}
               </div>
               <div class="avandor-user lg-font">
                   {{avandorUser}}
               </div>
           </div>
           <div class="personal-center-layout-reward">
                <div class="reward">
                       <div class="circle left-circle"></div>
                       <div class="circle right-circle"></div>
                       <div class="flex">
                           <div class="medal">
                           </div>
                           <div class="medal-num flex flex-horizontal-center flex-vertical-center">
                               <div>
                                   <span class="xlg-font">{{medalNum}}</span>
                                   <p>已获得黄桷兰</p>
                               </div>
                           </div>
                       </div>
                </div>
               <div class="reward">
                   <div class="rank-list"><router-link to="/rank-list">查看排行榜</router-link></div>
                   <div class="circle left-circle"></div>
                   <div class="circle right-circle"></div>
                   <div class="flex">
                       <div class="trophy">
                       </div>
                       <div class="trophy-num flex flex-horizontal-center flex-vertical-center">
                           <div>
                               <span class="xlg-font">{{trophyNum}}</span>
                               <p>我当前的排名</p>
                           </div>
                       </div>
                   </div>
               </div>
           </div>
            <div class="personal-center-layoutt-buttons" >
              <!--  <button class="main"><router-link to="/my-rewards">{{btn}}</router-link></button>-->
                <button class="main" v-on:click="btnClick" >{{btn}}</button>
            </div>


           <div class="md-font personal-center-layout-rules hide">
            <router-link to="/activity-rules">活动规则</router-link>
           </div>
           <div class="bottom-logos">
               <img src="../../base/images/bottom_logo@2x.png" alt="">
           </div>
    </div>

</template>
<script>
    var avandorImg=require('base/images/headImg@2x.png');
    module.exports={
        data:function(){
            return {
                avandorSrc:avandorImg,
                avandorName:'最佳志愿传播者',
                avandorUser:'',
                medalNum:'88',
                trophyNum:'88',
                btn:"查看我的奖品",
                share:"",
                openId:""
            }
        },
        created:function(){
            var _this=this;

            if(_this.$route.query.share!=""&&_this.$route.query.share!=null&&_this.$route.query.share!="null"){
                _this.btn="关注公众号了立即参与";
                _this.share = _this.$route.query.share;
                _this.openId = _this.$route.query.openId;
            }
            $.post("/wx/queryInfo",{"userId":_this.$root.userId},function (data) {
                if(data.code == 200){
                    var d = data.data;
                   // _this.avandorSrc = d.headImg;
                    _this.avandorUser= decodeURIComponent(d.nickName);
                    _this.medalNum = d.score;
                    _this.trophyNum = d.rank;
                    if(d.nickName==null||d.nickName==''){
                        layer.prompt({
                            title: '请输入您的昵称',
                        }, function(value, index, elem){
                            $.post("/wx/updateInfo",{"userId":_this.$root.userId,"nickName":value},function (data) {
                                if(data.code == 200){
                                    _this.avandorUser = value;
                                    layer.alert("设置成功!");
                                }
                            },"json");
                        });
                    }
                }
            },"json");

        },
        methods: {
            btnClick: function () {
                var _this = this;
               if(_this.share!=''){
                  // _this.$router.push({path: "home", query: {"share":false}});
                   //关注公众号

                   var url="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzI4MzAwNDUwNg==&scene=124#wechat_redirect";
                   window.location = url;
               }else{
                   _this.$router.push("my-rewards");
               }
            }
        }

    }
</script>
<style lang="less">
    .personal-center-layout{
        
        
        .personal-center-layout-avandor{
            text-align: center;
            width:50vw;
            // height:30vw;
            margin:0 auto;
            //padding-top: 11.4vh;
            
            .avandor-bg{
              
              img{
                width: 88px;
                height: 88px;
                border: 1px solid #FFFFFF;
                border-radius: 100%;
              }
            }
            .avandor-name{
                background: #FFAD43;
                border-radius: 100px;
                color:white;
                position: relative;
                top:-15px;
                height:3.7vh;
                line-height: 3.7vh;
                margin:0 auto;
                width:34.1vw;
            }
            .avandor-user{
                position: relative;
                text-align: center;
                font-size: 12px;
                color: #FFFFFF;
                letter-spacing: 0.83px;
                top: -3px;
            }
        }
        .personal-center-layout-reward{
            width:80vw;
            margin:0 auto;
            margin-top:5vw;
            >.reward{
                margin-bottom: 20px;
                height:120px;
                border-radius: 5px;
                position: relative;
                background-color: #FFFFF8;
                .circle{
                    width:10px;
                    height:20px;
                    background-color: #17AEE6;
                    position: absolute;
                    top:50px;
                }
                .left-circle{
                    left: -1px;
                    border-radius: 0px 10px 10px 0px;
                }
                .right-circle{
                    right:-1px;
                    border-radius: 10px 0px 0px 10px;
                }
                .flex{
                    height:100%;
                    padding:10px;
                    box-sizing: border-box;
                    >div{
                        width:50%;
                        background-repeat: no-repeat;
                        background-position: center;
                        background-size:50px ;
                    }
                }
                .medal{
                    background-image: url("../../base/images/jp3@2x.png");
                    border-right:1px dashed #dedede;
                }
                .trophy{
                    background-image: url("../../base/images/trophy.png");
                    border-right:1px dashed #dedede;
                }
                .medal-num{
                    color:#FA8E01;

                    div{
                        width:100%;
                        text-align: center;
                        font-size: 13.5px;

                    }
                    span{
                        margin-bottom: 10px;
                        font-size: 30px;
                        display: block;
                    }
                }
                .trophy-num{
                    color:#FB7474;
                    div{
                        width:100%;
                        text-align: center;
                        font-size: 13.5px;
                    }

                    span{
                        margin-bottom: 10px;
                        font-size: 30px;
                        display: block;
                    }
                }

            }
        }
        .personal-center-layoutt-buttons{
            width:80vw;
            margin:10px auto;
        }
        .personal-center-layout-rules{
            padding-bottom: 2vw;
            text-align: center;
            color:white;
            a{
                color:white;
            }
        }
        .rank-list{
            background-color: #FB7474;
            padding:5px;
            position: absolute;
            right:10px;
            top:-10px;
            a{
                text-decoration: none;
                color:white;
            }
        }
    }

</style>